<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="app-container">
          <el-row>
            <el-col :span="18">
            </el-col>
                    <el-col :span="16" style="float:right;">
            <el-button-group style="float: right">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="el-button--mini"
                @click="handleCreate"
                >添加</el-button
              >
              <el-button type="primary" size="mini" @click="handleUpdate()">
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="ui_delete(null,null)"
              >
                删除
              </el-button>
            </el-button-group>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start">
            <el-table
              v-loading="listLoading"
              :data="list"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              @row-click="rowClick"
              @selection-change="handleSelectionChange">
            >
            <el-table-column
            type="selection"
             width="55"
            ></el-table-column>
                <el-table-column align="center" label="订单编号" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.orderNo }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="产品编号" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.productNo }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="产品名称" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.productName }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="工序编号" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.produceProcedureNo }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="工序名称" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.produceProcedureName }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="批次" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.batch }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="客户需求量" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.totalAmount }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="已生产数量" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.producedAmount }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="未生产数量" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.planAmount }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="交货时间" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.deliveryDate }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="计划开始时间" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.planProduceStartDate }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="计划结束时间" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.planProduceEndDate }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="工期" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.duration }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="latestProduceStartDate" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.latestProduceStartDate }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="最晚交货时间" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.scheduleSate }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="自由时差" width="95" style="display:none;">
                <template slot-scope="scope">
                  {{ scope.row.freeFloat }}
                </template>
              </el-table-column>
            </el-table>
              </el-row>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="app-container">
          <el-row>
            <el-button-group style="float: right">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="el-button--mini"
                @click="handleCreate"
                >添加</el-button
              >
              <el-button type="primary" size="mini"> 编辑 </el-button>
              <el-button size="mini" type="danger"> 删除 </el-button>
            </el-button-group>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="temp.orderNo" />
        </el-form-item>
        <el-form-item label="产品编号" prop="productNo">
          <el-input v-model="temp.productNo" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="temp.productName" />
        </el-form-item>
        <el-form-item label="工序编号" prop="produceProcedureNo">
          <el-input v-model="temp.produceProcedureNo" />
        </el-form-item>
        <el-form-item label="工序名称" prop="produceProcedureName">
          <el-input v-model="temp.produceProcedureName" />
        </el-form-item>
        <el-form-item label="批次" prop="batch">
          <el-input v-model="temp.batch" />
        </el-form-item>
        <el-form-item label="客户需求量" prop="totalAmount">
          <el-input v-model="temp.totalAmount" />
        </el-form-item>
        <el-form-item label="已生产数量" prop="producedAmount">
          <el-input v-model="temp.producedAmount" />
        </el-form-item>
        <el-form-item label="未生产数量" prop="planAmount">
          <el-input v-model="temp.planAmount" />
        </el-form-item>
        <el-form-item label="交货时间" prop="deliveryDate">
          <el-input v-model="temp.deliveryDate" />
        </el-form-item>
        <el-form-item label="计划开始时间" prop="planProduceStartDate">
          <el-input v-model="temp.planProduceStartDate" />
        </el-form-item>
        <el-form-item label="计划结束时间" prop="planProduceEndDate">
          <el-input v-model="temp.planProduceEndDate" />
        </el-form-item>
        <el-form-item label="工期" prop="duration">
          <el-input v-model="temp.duration" />
        </el-form-item>
        <el-form-item label="latestProduceStartDate" prop="latestProduceStartDate">
          <el-input v-model="temp.latestProduceStartDate" />
        </el-form-item>
        <el-form-item label="最晚交货时间" prop="scheduleSate">
          <el-input v-model="temp.scheduleSate" />
        </el-form-item>
        <el-form-item label="自由时差" prop="freeFloat">
          <el-input v-model="temp.freeFloat" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button
          type="primary"
          @click="
            dialogStatus === 'create'
              ? ui_create()
              : ui_update()
          "
        >
          确定
        </el-button>
      </div>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import request from "@/utils/request";
import {
  getAll,
  getOne,
  create,
  update,
  deleteBatch
} from "@/api/mesProduce_Order_Product_Plan";

export default {
  components: { Pagination },
  data() {
    return {
      filterText: "",
      data2: [],
      defaultProps: {
        children: "children",
        label: "Produce_Order_Product_Plan",
      },
      list: null,
      list2: null,
      listLoading: true,
      total: 0,
      total2: 0,
      listQuery: {
              page: 1,
              limit: 6,
              pageSizes: [6, 10, 14],
            },
      listQuery2: {
        page: 1,
        limit: 6,
        pageSizes: [6, 10, 14],
      },
      currentProduce_Order_Product_PlanId: 0,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      rules: {
        orderNo: [
          {
            required: true,
            message: "订单编号不能为空！",
            trigger: "change",
          },
        ],
        productNo: [
          {
            required: true,
            message: "产品编号不能为空！",
            trigger: "change",
          },
        ],
        productName: [
          {
            required: true,
            message: "产品名称不能为空！",
            trigger: "change",
          },
        ],
        produceProcedureNo: [
          {
            required: true,
            message: "工序编号不能为空！",
            trigger: "change",
          },
        ],
        produceProcedureName: [
          {
            required: true,
            message: "工序名称不能为空！",
            trigger: "change",
          },
        ],
        batch: [
          {
            required: true,
            message: "批次不能为空！",
            trigger: "change",
          },
        ],
        totalAmount: [
          {
            required: true,
            message: "客户需求量不能为空！",
            trigger: "change",
          },
        ],
        producedAmount: [
          {
            required: true,
            message: "已生产数量不能为空！",
            trigger: "change",
          },
        ],
        planAmount: [
          {
            required: true,
            message: "未生产数量不能为空！",
            trigger: "change",
          },
        ],
        deliveryDate: [
          {
            required: true,
            message: "交货时间不能为空！",
            trigger: "change",
          },
        ],
        planProduceStartDate: [
          {
            required: true,
            message: "计划开始时间不能为空！",
            trigger: "change",
          },
        ],
        planProduceEndDate: [
          {
            required: true,
            message: "计划结束时间不能为空！",
            trigger: "change",
          },
        ],
        duration: [
          {
            required: true,
            message: "工期不能为空！",
            trigger: "change",
          },
        ],
        latestProduceStartDate: [
          {
            required: true,
            message: "latestProduceStartDate不能为空！",
            trigger: "change",
          },
        ],
        scheduleSate: [
          {
            required: true,
            message: "最晚交货时间不能为空！",
            trigger: "change",
          },
        ],
        freeFloat: [
          {
            required: true,
            message: "自由时差不能为空！",
            trigger: "change",
          },
        ],
      },
      temp: {
       id: undefined,
       orderNo : '',
       productNo : '',
       productName : '',
       produceProcedureNo : '',
       produceProcedureName : '',
       batch : '',
       totalAmount : '',
       producedAmount : '',
       planAmount : '',
       deliveryDate : '',
       planProduceStartDate : '',
       planProduceEndDate : '',
       duration : '',
       latestProduceStartDate : '',
       scheduleSate : '',
       freeFloat : '',
      },
      //表格變量
      lstSelected: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSelectionChange (val) {
       this.lstSelected = val
    },
    fetchData() {
      this.listLoading = true
      let params = {
        name: ''
      }
      getAll(params).then((response) => {
        this.list = response.data
        this.listLoading = false
      })
    },

    rowClick(row, column, event) {
      this.currentTherbligsTypeId = row.id
      //this.getTherbligs()
    },
    ui_create() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.temp.id = 0; //自增
          create(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: "Success",
              message: "添加成功！",
              type: "success",
              duration: 2000,
            })
          })
        }
      })
    },
    ui_update() {
     
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          update(this.temp).then(() => {
            const index = this.list.findIndex((v) => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: "Success",
              message: "修改成功！",
              type: "success",
              duration: 2000,
            })
          })
        }
      });
    },
    ui_delete(row, index) {
       if(this.lstSelected == null || this.lstSelected.length === 0)
      {
         this.$message.error('请先选择要删除的Produce_Order_Product_Plan')
         return
      }
       this.$confirm('是否要删除该菜单', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
      let ids = []
      this.lstSelected.map(function(elm){
         ids.push(elm.id)
      })
       debugger
      deleteBatch(ids).then(() => {
        ids.forEach((elm) => {
         const index = this.list.findIndex((v) => v.id === elm)
         this.list.splice(index, 1)
        })
       
        this.dialogFormVisible = false
        this.$notify({
          title: "Success",
          message: "删除成功！",
          type: "success",
          duration: 2000,
        })
      })
    },
    resetTemp() {
      this.temp = {
       id: undefined,
              orderNo : '',
              productNo : '',
              productName : '',
              produceProcedureNo : '',
              produceProcedureName : '',
              batch : '',
              totalAmount : '',
              producedAmount : '',
              planAmount : '',
              deliveryDate : '',
              planProduceStartDate : '',
              planProduceEndDate : '',
              duration : '',
              latestProduceStartDate : '',
              scheduleSate : '',
              freeFloat : '',
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = "create"
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate()
      })
    },
    handleUpdate() {
      if(this.lstSelected == null || this.lstSelected.length !==1)
      {
         this.$message.error('请先选择一条Produce_Order_Product_Plan')
         return
      }
      this.temp = Object.assign({}, this.lstSelected[0]); // copy obj
      this.dialogStatus = "update"
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate()
      })
    },
  },
}
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
